<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
      <el-breadcrumb-item>宠物热点管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区 -->
      <el-form
        ref="searchFormRef"
        :inline="true"
        :model="queryInfo.query"
        size="mini"
      >
        <el-form-item style="width: 400px">
          <el-col :span="7">
            <el-form-item prop="date_type">
              <el-select
                v-model="queryInfo.query.date_type"
                placeholder="请选择"
                size="mini"
              >
                <el-option label="创建日期" value="1"></el-option>
                <el-option label="发布日期" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="start_date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="queryInfo.query.start_date"
                size="mini"
                style="width: 125px"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="8">
            <el-form-item prop="end_date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="queryInfo.query.end_date"
                size="mini"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="热点类型" prop="hot_class">
          <el-select
            v-model="queryInfo.query.hot_class"
            placeholder="请选择"
            filterable
            size="mini"
            clearable
          >
            <el-option key="1" label="文章" value="1"> </el-option>
            <el-option key="2" label="视频" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryInfo.query.status"
            placeholder="请选择"
            filterable
            size="mini"
            clearable
          >
            <el-option key="1" label="待发布" value="0"> </el-option>
            <el-option key="2" label="已发布" value="1"> </el-option>
            <el-option key="3" label="已关闭" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryInfo.query.keywords"
            placeholder="热点记录ID，热点标题"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="theme-background-color"
            size="mini"
            @click="searchList"
          >
            搜索
          </el-button>
          <el-button size="mini" @click="resetSearchForm"> 重置 </el-button>
        </el-form-item>
      </el-form>

      <!-- 操作区域 -->
      <div>
        <el-button
          class="theme-background-color"
          icon="el-icon-plus"
          size="mini"
          @click="$router.push('/pets/HotSpotAdd')"
        >
          热点配置
        </el-button>
        <el-button
          class="theme-background-color"
          icon="el-icon-plus"
          size="mini"
          @click="delayDialogVisibles()"
        >
          新增分类
        </el-button>
        <!-- <el-button icon="el-icon-download" size="mini"> 导出数据 </el-button> -->
      </div>

      <!-- 列表区域 -->
      <el-table :data="list" border stripe>
        <el-table-column label="记录ID" min-width="80px" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
            <el-tag type="danger" v-if="scope.row.is_push == 1">置顶</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="热点标题【ID】" min-width="140px" align="center" prop="title">
        </el-table-column>
        <el-table-column label="热点分类" prop="classifyName.name" min-width="80px" align="center"></el-table-column>
        <el-table-column label="宠物类别" min-width="80px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.pets_kinds == 1">狗</span>
            <span v-else-if="scope.row.pets_kinds == 2">猫</span>
            <span v-else>猫狗通用</span>
          </template>
        </el-table-column>
        <el-table-column label="热点类型" min-width="80px" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.hot_class == 1'>文章</span>
            <span v-else>视频</span>
          </template>
        </el-table-column>
        <el-table-column label="浏览数" prop="browse_count" min-width="80px" align="center"></el-table-column>
        <el-table-column label="评论数" prop="comment_count" min-width="80px" align="center"></el-table-column>
        <el-table-column label="点赞数" prop="browse_count" min-width="80px" align="center"></el-table-column>
        <el-table-column label="创建人【ID】" min-width="120px" align="center">
          <template slot-scope="scope">
            {{ scope.row.creator_name }}【{{ scope.row.creator_id }}】
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"  min-width="140px" align="center"></el-table-column>
        <el-table-column label="发布时间|关闭时间" min-width="140px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">{{ scope.row.publish_time }}</span>
            <span v-if="scope.row.status == 2">{{ scope.row.close_time }}</span>
            <span v-if="scope.row.status == '0'">-</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">待发布</span>
            <span v-if="scope.row.status == 1">已发布</span>
            <span v-if="scope.row.status == 2" style="color:red">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180px" align="center">
          <template slot-scope="scope">
            <!-- 待发布 -->
            <span v-if="scope.row.status == '0'">
              <el-link
                type="primary"
                @click="pushHot(scope.row.id,1)"
              >
                发布
              </el-link>
              &nbsp;
              <el-link type="primary"
                @click="$router.push({ path: '/pets/HotSpotEdit', query: { id: scope.row.id } })">
                编辑
              </el-link>
              &nbsp;
              <el-link type="danger" @click="deleteHotSpot(scope.row.id)">
                删除
              </el-link>
            </span>
            <!-- 已发布 -->
            <span v-if="scope.row.status == '1'">
              <el-link @click="pushHot(scope.row.id,2)" type="primary">
                关闭
              </el-link>
              &nbsp;
              <el-link v-if="scope.row.is_push === 1"
                @click="toppingHot(scope.row,0)"
              >
                取消置顶
              </el-link>
              <el-link v-else
                @click="toppingHot(scope.row,1)"
                type="primary"
              >
                置顶
              </el-link>
            </span>
            <!-- 已关闭 -->
            <span v-if="scope.row.status === 2">
              <el-link type="primary"
                @click="$router.push({ path: '/pets/HotSpotEdit', query: { id: scope.row.id } })">
                编辑
              </el-link>
              &nbsp;
              <el-link
                type="primary"
                @click="pushHot(scope.row.id,1)"
              >
                重新发布
              </el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      :visible.sync="delayDialogVisible"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="新增分类"
    >
      <el-form label-width="70px" :model="classData" ref="classDataRef" :rules="classDataRules">
        <el-form-item label="分类名称" label-width="100px" prop="className">
          <el-input v-model="classData.className"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="100px">
          <el-input type="textarea" v-model="classData.remark"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeLoding()">取 消</el-button>
        <el-button class="theme-background-color" @click="saveClass()">
          确 定
        </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: {
          date_type: '1',
          start_date: '',
          end_date: '',
          status: '',
          keywords: '',
          hot_class: ''
        },
        pagenum: 1,
        pagesize: 20
      },
      addClass: false,
      classData: {
        className: "",
        remark: ""
      },
      classDataRules: {
        className: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      delayDialogVisible: false,
      list: [],
      total: 0
    }
  },
  created() {
    this.initDate()
    this.getListData()
  },
  methods: {
    initDate() {
      // 默认一个月
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      this.queryInfo.query.start_date = this.getFormatDate(start)
      this.queryInfo.query.end_date = this.getFormatDate(end)
    },
    searchList() {
      this.queryInfo.pagenum = 1
      this.getListData()
    },
    resetSearchForm() {
      this.$refs.searchFormRef.resetFields()
      this.getListData()
    },
    async getListData() {
      // 返回数据重命名为res
      const { data: res } = await this.$http.post(
        '/admin/PetsHot/pageList',
        this.queryInfo
      )
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.list = res.data.list
      this.total = res.data.total
    },
    async pushHot(id, status) {
      // 返回数据重命名为res
      const { data: res } = await this.$http.post(
        '/admin/PetsHot/pushHot',
        { id: id, status: status }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.getListData()
    },
    async toppingHot(row, status) {
      var msg = ''
      if (status === 1) {
        msg = '确定置顶热点【' + row.title + '】吗？置顶后热点将靠前'
      } else {
        msg = '确定取消置顶热点【' + row.title + '】吗？取消后热点将不再靠前'
      }
      this.$confirm(msg, '提示')
        .then(async ({ value }) => {
         const { data: res } = await this.$http.post(
           '/admin/PetsHot/toppingHot',
           { id: row.id, status: status }
         )
         if (res.meta.status !== 200) {
           return this.$message.error(res.meta.msg)
         }
          this.$message.success(res.meta.msg)
         this.getListData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    async delayDialogVisibles() {
      this.delayDialogVisible = true
      this.addClass = true
    },
    async saveClass() {
      this.$refs.classDataRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          '/admin/PetsHot/saveClass',
          { name: this.classData.className, remark: this.classData.remark }
        )
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.closeLoding()
        this.getListData()
      })
    },
    closeLoding() {
      this.delayDialogVisible = false
      this.addClass = false
      this.classData.className = ''
      this.classData.remark = ''
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getListData()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getListData()
    },
    deleteHotSpot(row) {
      // 弹框询问是否禁用用户
      this.$confirm('确定删除该热点【' + row + '】吗？删除后将不再显示', '提示')
        .then(async ({ value }) => {
          const { data: res } = await this.$http.post(
            '/admin/PetsHot/delHot',
            {
              id: row
            }
          )
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success(res.meta.msg)
          this.getListData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    async closeHotSpot(id) {
      // 弹框询问是否启用用户
      const confirmResult = await this.$confirm(
        '是否确认关闭该热点？关闭后客户端不再显示',
        '关闭',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      const { data: res } = await this.$http.post('/admin/goods/active', {
        id: id
      })
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.getListData()
    }
  }
}
</script>

<style lang="less" scoped>
.line {
  text-align: center;
}
</style>
